<template>
    <header>
        <div class="topbar">
            <div class="container flex justify-between">
                <div class="flex">
                    <div class="logo"></div>
                    <ul class="nav flex">
                        <li :class="clickdx==index?'current':''" v-for="(item,index) in navData" :key='index' @click="changeCurrent(index)">
                            <router-link :to="item.path">{{item.navName}}</router-link>
                        </li>
                    </ul>
                </div><!-- left -->
                <div class="flex align-center" v-if="!userInfo">
                    <div class="search flex align-center">
                        <i class="el-icon-search"></i>
                        <input type="text" placeholder="音乐/视频/电台/用户">
                    </div>
                    <a class="m-topvd" href="">创作者中心</a>
                    <a class="login" @click="showLogin">登录</a>
                </div>
                <div class="flex align-center justify-between username" v-else>
                    <div class="search flex align-center">
                        <i class="el-icon-search"></i>
                        <input type="text" placeholder="音乐/视频/电台/用户">
                    </div>
                    <img :src="userInfo.profile.avatarUrl">
                    <span>{{userInfo.profile.nickname}} </span>
                    <button @click="destory">退出</button>
                </div>
            </div>
        </div>
    </header>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            clickdx:0,
            navData:[
                {navName:'发现音乐',path:'/home'},
                {navName:'我的音乐',path:'/about'},
                {navName:'朋友',path:''},
                {navName:'商城',path:''},
                {navName:'音乐人',path:''},
                {navName:'下载客户端',path:''},
            ],
            userInfoData:localStorage.userInfo
        }
    },
    computed:{
        userInfo(){//computed 要基于this.data才会响应式，不能直接获取localStorage 不然不更新 https://blog.csdn.net/websoftware/article/details/73200957
            if(this.userInfoData){
                return JSON.parse(this.userInfoData)||this.$store.state.userInfo
            }else{
                return this.$store.state.userInfo
            }
        },
        // ...mapState({userInfo:"userInfo"})
    },
    methods:{
        changeCurrent(idx){
            console.log(this.clickdx);
            this.clickdx=idx
        },
        showLogin(){
            this.$store.commit('showCpn','isShowLogin')
        },
        destory(){
            this.userInfoData=null
            localStorage.removeItem('userInfo')
            this.$store.commit("setUserInfo",null)
        }
    }
}
</script>

<style lang="scss" scoped>
header{
    .topbar{
        height: 70px;
        background: #222;
        .logo{
            width: 176px;
            height: 69px;
            background: url("../assets/topbar.png");
        }
        .nav li{
            line-height: 70px;
            a{
                padding: 0 19px;
                display: block;
                font-size: 14px;
                color: white;
            }
            &.current,&:hover{
                background: #000;
                
            }
        }
        .search{
            height: 32px;
            background: rgb(255, 255, 255);
            border-radius: 20px;
            i{
                margin-left: 5px;
                height: 20px;
                font-size: 20px;
            }
            input{
                width: 140px;
                height: 32px;
                padding-left: 5px;
                border: none;
                border-radius: 20px;
                outline: none;
            }
        }
        .m-topvd{
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
            margin-left: 10px;
            color: #ccc;
            border: 1px solid #4F4F4F;
            border-radius: 20px;
        }
        .login{
            line-height: 32px;
            margin-left: 10px;
            color: #787878;
        }
        .username{
            min-width: 300px;
            span{
                color: white;
            }
            img{
                width: 35px;
                height: 35px;
                border-radius: 50%;
            }
            button{
                width: 50px;
                height: 30px;
                border: 1px solid #787878;
                border-radius: 5px;
                color: #787878;
                background: transparent;
            }
        }
    }
}

</style>